<!--
 * @Author: wangdan
 * @Date: 2023-05-09 15:57:56
 * @LastEditors: modefy
 * @LastEditTime: 2023-05-15 15:40:47
 * @Description: 
-->
<template>
  <div class="commodity">
    <el-card>
      <div class="search">
        <el-form :inline="true" :model="from" class="demo-form-inline" ref="formRef">
          <el-form-item label="商品名称" prop="productName">
            <el-input v-model="from.productName" placeholder="请输入商品名称" />
          </el-form-item>
          <el-form-item label="单号" prop="orderNo">
            <el-input v-model="from.orderNo" placeholder="请输入单号" />
          </el-form-item>
          <el-form-item label="仓库状态" prop="inventory">
            <el-select v-model="from.inventory" placeholder="请选择">
              <el-option v-for="item in selectList" :key="item.id" :label="item.label" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit('1')">查询</el-button>
            <el-button type="warning" @click="onSubmit('2', formRef)">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="content">
        <div class="add">
          <el-button type="primary" @click="addBtn">新增</el-button>
        </div>
        <div class="tab-content">
          <Tabs :table-data="tabData" :table-header="tableHeader">
            <template #btn="{ rowData }">
              <el-button type="danger" size="small" @click="handleClick(rowData, 'del')">删除</el-button>
              <el-button type="warning" size="small" @click="handleClick(rowData, 'emit')">编辑</el-button></template>
          </Tabs>
        </div>
      </div>
      <div class="pagination">
        <Pagination :pages="pages" @handleCurrentChange="handleCurrentChange"></Pagination>
      </div>
    </el-card>
    <!-- 新增商品 -->
    <Dialog v-model:showValue="addShow" :title="title">
      <add-dialog @close="addShow = false" @getData="getData"></add-dialog>
    </Dialog>
    <!-- 修改商品 -->
    <Dialog v-model:showValue="updateShow" :title="title">
      <update-dialog @close="updateShow = false" @getData="getData" :tableInfo="tableInfo"></update-dialog>
    </Dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, watch } from "vue"
import type { fromType, selectType, tabHeaderType, tabDataType } from "./index"
import type { FormInstance, Action } from "element-plus"
import Pagination from "./components/pagination.vue"
import AddDialog from "./components/addDialog.vue"
import UpdateDialog from "./components/updateDialog.vue"
import { getTableData, delData } from "@/service/commodity/index"
import { ElMessage, ElMessageBox } from "element-plus"
import Tabs from "./components/tabs.vue"
import Dialog from "./components/dialog.vue"
const formRef = ref<FormInstance>()
const from = reactive<fromType>({
  productName: "",
  orderNo: "",
  inventory: ""
})
const selectList = ref<selectType[]>([
  {
    label: "全部",
    id: 0
  },
  {
    label: "现存",
    id: 1
  },
  {
    label: "缺货",
    id: 2
  }
])
const tabData = ref<tabDataType[]>([])
const tableHeader = ref<tabHeaderType[]>([
  {
    id: 1,
    label: "商品名",
    prop: "productName"
  },
  {
    id: 2,
    label: "单号",
    prop: "orderNo"
  },
  {
    id: 3,
    label: "描述",
    prop: "description",
    showTooltip: true
  },
  {
    id: 4,
    label: "库存",
    prop: "inventory",
    showTooltip: true
  }
])
const title = ref("新增")
const updateShow = ref(false)
const addShow = ref(false)
const pages = reactive({
  total: 0,
  pageSize: 5,
  pageNum: 1
})
const getData = async () => {
  const res = await getTableData({
    ...from,
    pageNum: pages.pageNum,
    pageSize: pages.pageSize
  })
  tabData.value = res.data
  pages.total = res.total
}
getData()
//查询-重置
const onSubmit = async (type: string, formEl?) => {
  if (type == "2") {
    formEl.resetFields()
    pages.pageNum = 1
  }
  getData()
}
//新增
const addBtn = async () => {
  title.value = "新增"
  addShow.value = true
}
const tableInfo = ref()
//删除-编辑
const handleClick = async (rowData, type) => {
  if (type == "del") {
    ElMessageBox.confirm("确定要删除吗，删除后将无法恢复?", "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      delData({ id: rowData.id }).then((res) => {
        getData();
        ElMessage({
          type: "success",
          message: "删除成功",
        });
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "已取消删除",
      });
    });
    // console.log(rowData.id, "删除")
    // ElMessageBox.alert("确定删除该信息？", "删除", {
    //   confirmButtonText: "确定",
    //   callback: async (action: Action) => {
    //     await delData({ id: rowData.id })
    //     ElMessage({
    //       type: "success",
    //       message: `删除成功`
    //     })
    //     getData()

    //   }
    // })
  } else {
    title.value = "编辑"
    updateShow.value = true
    tableInfo.value = tabData.value.find((item: any) => item.id == rowData.id)
  }
}
//分页
const handleCurrentChange = (val) => {
  pages.pageNum = val
  getData()
}
</script>
<style lang="scss" scoped>
@import "./index.scss";
</style>
